<template>
    <div class="sign-home">
        <AppHeader bg="#01A0D4" :color-reverse="true" :onback="closePage">
            晨起练功
            <span slot="right" @click="$router.push({name: 'RuleDetail'})">详细规则</span>
        </AppHeader>
        <div class="body">
            <div class="sign-poster"></div>
            <div class="body_main">
                <div class="total-money">{{realNum}}</div>
                <div class="current">
                    当前参与人数{{realNum}}
                </div>
                <div class="join-btn-block">
                    <AppButton :block="true"
                               class="pay-btn"
                               bg="linear-gradient(to right, #FF2E27, #F9755E)"
                               @click="payChallenge">
                        <div>支付一元参与挑战</div>
                        <div class="sign-time-tip">打卡时间早上5:00-8:00</div>
                    </AppButton>
                    <AppButton :block="true"
                               v-if="signVisible"
                               bg="linear-gradient(to right, #5E99FF, #3DB2FF)"
                               @click="sign">
                        打卡
                    </AppButton>
                </div>
                <div class="brief-container">
                    <AppScoreCard title="邀请好友" sub-title="&nbsp;" count="" @click.native="invite"></AppScoreCard>
                    <AppScoreCard title="我的战绩" :sub-title="'累积早起' + myNum + '天'" theme="red" @click.native="checkMyScore"></AppScoreCard>
                </div>
                <div class="sign-title">今日打卡战况</div>
                <div class="fight-container">
                    <div class="status-pk_header">
                        <div class="block">
                            <div>成功</div>
                            <div>{{successCount || 0}}</div>
                        </div>
                        <div class="pk-tag">
                            <img src="../assets/image/VS.png">
                        </div>
                        <div class="block">
                            <div>失败</div>
                            <div>{{failCount || 0}}</div>
                        </div>
                    </div>
                    <div class="pk_body" >
                        <SignAvatar :user="earlyMost" v-if="earlyMost.id" type="1"></SignAvatar>
                        <SignAvatar :user="consistMost" v-if="consistMost.id" type="2"></SignAvatar>
                        <SignAvatar :user="luckyMost" v-if="luckyMost.id" type="3"></SignAvatar>
                    </div>
                </div>
            </div>
        </div>
        <vodal v-if="false" :show="show" animation="fade" @hide="onHide" :closeOnClickMask="false" class-name="my-model">
            <div class="rules">
                1.早起打卡每天支付1元参与次日早起挑战
                <br>
                2.次日打卡时间 5:00-8:00
                <br>
                3.成功打卡 随机瓜分当日奖金，打卡失败 不可参与当日奖金分配
            </div>
            <div class="link">
                <router-link :to="{name: 'RuleDetail'}">查看详细规则</router-link>
            </div>
        </vodal>
    </div>
</template>

<script>
    import AppHeader from '../components/AppHeader';
    import AppScoreCard from "../components/AppScoreCard";
    import AppButton from "../components/AppButton";
    import SignAvatar from "../components/SignAvatar";
    import httpService from '../helper/httpService';
    import Vodal from "vodal/src/Vodal";
    export default {
        name: "SignHome",
        components: {
            Vodal,
            SignAvatar,
            AppButton,
            AppScoreCard,
            AppHeader
        },
        data() {
            return {
                totalMoney: 0,
                realNum: 0,
                myNum: 0,
                successCount: 0,
                failCount: 0,
                earlyMost: {},
                consistMost: {},
                luckyMost: {},
                show: false,
                signVisible: true
            };
        },
        methods: {
            init() {
                httpService.post('/signin/realtimestatistics').then(res => {
                    this.totalMoney = res.maxBonus;
                    this.realNum = res.realNum;
                    this.myNum = res.myNum;
                });
                httpService.get('/signin/signinreport').then(res => {
                    res = res || {};
                    this.successCount = res.todaySuccess;
                    this.failCount = res.todayFail;
                    this.earlyMost = {
                        id: res.firstUserid,
                        avatar: res.firstimageurl,
                        name: res.firstnickname,
                        reason: res.time + '打卡'
                    };
                    this.consistMost = {
                        id: res.longestUserid,
                        avatar: res.longestimageurl,
                        name: res.longestnickname,
                        reason: '连续' + (res.longestDay || 0) + '次'
                    };
                    this.luckyMost = {
                        id: res.maxUserid,
                        avatar: res.maximageurl,
                        name: res.maxnickname,
                        reason: (res.maxBonus || 0) + '元'
                    }
                });
                httpService.get('/signin/getSigninStatus').then(res => {
                    this.signVisible = !!res;
                })
            },
            payChallenge() {
                httpService.post('/signin/challenge', {
                    signdeposit: 1
                }).then(res => {
                    let { orderPayId } = res.data;
                    // this.$router.push({
                    //     name: 'SignPay',
                    //     query: {
                    //         appid,
                    //         partnerId,
                    //         prepayId,
                    //         packageValue,
                    //         nonceStr,
                    //         nonce_str,
                    //         sign,
                    //         timestamp
                    //     }
                    // });
                    window.navtiveDevice.pay('签到有彩', 1, orderPayId, window.location.href);
                }, err => {
                    this.$toast({
                        message: err.msg,
                        position: 'bottom'
                    })
                })
            },
            sign() {
                httpService.post('/signin/signin').then(res => {
                    this.$toast({
                        message: "恭喜您，签到成功！",
                        position: 'bottom'
                    })
                }, err => {
                    this.$toast({
                        message: err.msg,
                        position: 'bottom'
                    });
                });
            },
            checkMyScore() {
                this.$router.push({
                    name: 'MyScore'
                });
            },
            invite() {
                httpService.post('/user/friend/getLink', {
                    idcardseqno: 0,
                    userType: 0
                }).then(res => {
                    window.navtiveDevice.share('神行镖支付1元签到瓜分奖金池',
                        '每日支付1元参与签到有彩打卡，次日可瓜分奖金池，瓜分奖金不设上限，等你来挑战',
                        res.link);
                });
            },
            onHide() {
                this.show = false;
                window.localStorage.setItem('ruleShown', '0');
            },
            closePage() {
                window.navtiveDevice.pageFinish();
            }
        },
        mounted() {
            this.init();
            // let ruleShown = window.localStorage.getItem('ruleShown');
            // this.show = ruleShown !== '1';
            this.show = true;
        }
    }
</script>

<style lang="scss" scoped>
    .sign-home {
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        color: #fff;
        background-image: url('../assets/image/home-bg.png');
        .body {
            flex: 1;
            overflow: auto;
            text-align: center;
            background: #083EF6;
            .sign-poster {
                width: 100vw;
                height: 304/3.75+vw;
                position: relative;
                display: block;
                background-image: url('../assets/image/home-bg.png');
                background-size: cover;
                background-position: 0 -62/3.75+vw;
                background-repeat: no-repeat;
            }
            .body_main {
                background: linear-gradient(to bottom, #0389DC, #083EF6);
                padding: 0 10/3.75+vw 20/3.75+vw;
                position: relative;
                top: -30/3.75+vw;
            }
            .total-money {
                font-size: 40/3.75+vw;
                text-align: center;
            }
            .current {
                color: #fff;
                font-size: 16/3.75+vw;
            }
            .join-btn-block {
                margin: 20/3.75+vw auto 0;
                width: 94%;
                & /deep/ .pay-btn.app-button {
                    line-height: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                }
                .sign-time-tip {
                    font-size: 12/3.75+vw;
                    margin-top: 3/3.75+vw;
                }
            }
            .brief-container {
                background: rgba(255,255,255,.2);
                padding: 15/3.75+vw;
                margin-top: 20/3.75+vw;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 5/3.75+vw;
            }
            .sign-title {
                margin-top: 60/3.75+vw;
                color: #fff;
                font-size: 17/3.75+vw;
                background-repeat: no-repeat;
                background-image: url(../assets/image/title-bg.png);
                background-size: 232/3.75+vw 10/3.75+vw;
                background-position: 50%;
            }
            .fight-container {
                background: rgba(255,255,255,.2);
                padding: 15/3.75+vw;
                border-radius: 5/3.75+vw;
                margin-top: 40/3.75+vw;
                .status-pk_header {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    padding: 15/3.75+vw 60/3.75+vw;
                    line-height: 1.6;
                    .pk-tag {
                        font-size: 24/3.75+vw;
                        line-height: 1;
                        img {
                            width: 28/3.75+vw;
                        }
                    }
                }
                .pk_body {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 10/3.75+vw 0;
                }
            }
        }
    }

</style>
<style lang="scss">
    .my-model {
        .vodal-dialog {
            width: 70vw !important;
            color: #000;
            font-size: 16/3.75+vw;
            line-height: 1.6;
            .link {
                position: absolute;
                bottom: 20/3.75+vw;
                width: calc(100% - 30px);
                color: #666 !important;
                text-align: center;
                a {
                    color: #666 !important;
                    text-decoration: underline;
                }
            }
        }
        .vodal-mask {
            background: rgba(0,0,0,.6);
        }
    }
</style>
